import { useMemo } from 'react'

function useStyles(chart) {
  const { borderEnabled, border, topRow, topCol, gridEnabled, grid, stripe } = chart

  const styles = useMemo(() => {
    const theme = {
      // 外边框
      '--border-color': border?.color,
      '--border-width': `${border?.width}px`,
      '--border-style': border?.style,
      // 首行背景
      '--top-row-bg': topRow?.color,
      // 首列背景
      '--top-col-bg': topCol?.color,
      // 网格线
      '--grid-color': grid?.color,
      // 斑马线
      '--stripe-color': stripe?.color
    }

    const className = {
      'outside-border': borderEnabled, // 外边框样式
      'top-row-bg': topRow?.enabled, // 首行背景
      'top-col-bg': topCol?.enabled, // 首列背景
      'grid-vertical': gridEnabled && ['grid', 'vertical'].includes(grid?.style), // 垂直线
      'grid-horizontal': gridEnabled && ['grid', 'horizontal'].includes(grid?.style), // 水平线
      'stripe-bg': stripe?.enabled // 斑马线
    }

    return { theme, className }
  }, [borderEnabled, border, topRow, topCol, gridEnabled, grid, stripe])

  return styles
}

export default useStyles
